<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/header.css">
    <style>
        .infoWrapper{
            width: 1226px;
            margin: 0 auto;
            padding: 10px;
            font-size: 13px;
        }
        .infoWrapper .input-group{
            margin-top: 10px;
        }
        .infoWrapper .input-group >div{
            height: 30px;
            margin-top: 10px;
            display: flex;
        }

        .infoWrapper .input-group >div input{
            margin-right: 20px;
            outline: none;
            text-indent: 10px;
            width: 200px;
        }
        .infoWrapper .input-group >div button{
            font-size: 12px;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <%- include('common/header') %>
    <div class="infoWrapper">
        <div class="input-group">
            <label>用户名:</label>
            <div class="info-user">
                <input class="user" type="text"  disabled>
                <button class="changeUser">更改用户名</button>
            </div>
        </div>
        <div class="input-group">
            <label>密码:</label>
            <div class="info-pwd">
                <input class="pwd" type="text" value="*******" disabled>
                <button class="changePwd">更改密码</button>
            </div>
        </div>
        <div class="input-group">
            <label>手机号:</label>
            <div class="info-phone">
                <input class="phone" type="text" disabled>
                <button class="changePhone">更改手机号</button>
            </div>
        </div>
        <div class="input-group">
            <label>邮箱:</label>
            <div class="info-email">
                <input class="email" type="text" disabled>
                <button class="changeEmail">更改邮箱</button>
            </div>
        </div>
    </div>
</body>
<script type="module">
    import {findInfo,updateUser} from "/js/api.js";
    import {getCookie,setCookie} from "/js/cookie.js";

    var userInp = document.getElementsByClassName("user")[0];
    var changeUser = document.getElementsByClassName("changeUser")[0];
    
    var pwdInp = document.getElementsByClassName("pwd")[0];
    var changePwd = document.getElementsByClassName("changePwd")[0];

    var phoneInp = document.getElementsByClassName("phone")[0];
    var emailInp = document.getElementsByClassName("email")[0];
    
    // var isDisabled = true;   //是否禁用 (true:禁用 false:解禁)
    // changeUser.onclick = function(){
    //     if(isDisabled){  // 禁用 => 解禁
    //         userInp.disabled = false;  //解禁
    //         changeUser.textContent = "保存";
    //         isDisabled = false;      
    //     }else{  // 解禁 => 禁用
    //         userInp.disabled = true;  //禁用
    //         changeUser.textContent = "更改用户名";
    //         isDisabled = true;   
    //     }
    // }

    // 将token作为数据传入
    var token = localStorage.getItem("token");
    if(!token){  // 没有token
        console.log("重新登录");
        location.href = "/login?ReturnUrl="+ encodeURIComponent(location.href);
    }

    // 根据token获取用户信息
    var result = await findInfo({token:token});
    console.log(result);
    var data = result.data;  //获取响应数据
    var {status,message,data:info} = data;

    console.log(status);
    if(status == 200){
        var {user,phone,email} = info;
        userInp.value = user;
        phoneInp.value = phone;
        emailInp.value = email;
    }else if(status == 401){  //重新登录
        // 如果token已过期,或者没有token  => 去登录(在地址栏存储数据ReturnUrl=记录当前url地址)  -> 登录成功回到当前页面

        console.log("重新登录");
        location.href = "/login?ReturnUrl="+ encodeURIComponent(location.href);
    }






    changeUser.onclick = (function(){
        var isDisabled = true;   //是否禁用 (true:禁用 false:解禁)
        var defaultValue = userInp.value;   //先存储默认值(原值)
        return  async function(){
            if(isDisabled){  // 禁用 => 解禁
                userInp.disabled = false;  //解禁
                changeUser.textContent = "保存";
                isDisabled = false;      
            }else{  // 解禁 => (先保存)禁用
               
                // 先保存
                var user = userInp.value;  //新的用户名

                if(defaultValue == user){ // 如果新增 === 原值 => 没必要该
                    userInp.disabled = true;  //禁用
                    changeUser.textContent = "更改用户名";
                    isDisabled = true;  
                    return ;
                }else{
                    
                    // 向后端发送请求    // {lgc(当前登录的用户),user(新的用户)}
                    var result = await updateUser({token,user});
                    var data = result.data;

                    var {status,message} = data;

                    if(status == 200){

                        // 用户名更新成功
                        setCookie("lgc",user,31*24*60*60);
                        location.reload();


                        userInp.disabled = true;  //禁用
                        changeUser.textContent = "更改用户名";
                        isDisabled = true;   
                    }else{
                        alert(message);
                    }
                }


               

            }
        }
    })();

    changePwd.onclick = (function(){
        var isDisabled = true;   //是否禁用 (true:禁用 false:解禁)
        return function(){
            if(isDisabled){  // 禁用 => 解禁
                pwdInp.disabled = false;  //解禁
                changePwd.textContent = "保存";
                isDisabled = false;      
            }else{  // 解禁 => 禁用
                pwdInp.disabled = true;  //禁用
                changePwd.textContent = "更改密码";
                isDisabled = true;   
            }
        }
    })();


</script>
</html>